<%@ Page Language="C#" MasterPageFile="~/Common/WebSiteMaster.master" AutoEventWireup="true" Codebehind="D_AnimationExtender.aspx.cs"
    Inherits="ScottCateAjax2008.Lesson08.D_AnimationExtender" Title="Animation Extender" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="SM1" runat="server" />
    
    <script language="javascript">
        var getContentBounds;
    </script>
    <div>
        <div id="pageContent" style="border: dashed 2px red;">
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            Some Content
            <br /><br />
            Some Content
            <br /><br />
        </div>
    </div>
    <asp:Button runat="server" OnClientClick="return false;" ID="FadeOutButton" Text="Fade Out" />
    <asp:Button runat="server" OnClientClick="return false;" ID="FadeInButton" Text="Fade In" />
    <asp:Button runat="server" OnClientClick="return false;" ID="CollapseButton" Text="Collapse" />
    <asp:Button runat="server" OnClientClick="return false;" ID="ExpandParallelButton" Text="Expand in Parallel" />
    <asp:Button runat="server" OnClientClick="return false;" ID="ExpandSequenceButton" Text="Expand In Sequence" />
    
    <cc1:AnimationExtender id="DisableButtonExtender" runat="server" TargetControlId="ExpandParallelButton">
        <Animations>
            <OnLoad>
                <sequence>
                        <EnableAction AnimationTarget="ExpandParallelButton" Enabled="false" />
                        <EnableAction AnimationTarget="ExpandSequenceButton" Enabled="false" />
                </sequence>            
            </OnLoad>
        </Animations>
    </cc1:AnimationExtender>
    
    <cc1:AnimationExtender ID="FadeOutExtender" runat="server" TargetControlID="FadeOutButton">
        <Animations>
            <OnClick>
                <sequence>
                    <EnableAction Enabled="false" />
                    <FadeOut AnimationTarget="pageContent" />
                   <EnableAction Enabled="true" />
                </sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>
    
    <cc1:AnimationExtender ID="FadeInExtender" runat="server" TargetControlID="FadeInButton">
        <Animations>
            <OnClick>
                <sequence>
                   <EnableAction Enabled="false" />
                   <FadeIn AnimationTarget="pageContent" />
                   <EnableAction Enabled="true" />
                </sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>
    
    <cc1:AnimationExtender ID="CollapseExtender" runat="server" TargetControlID="CollapseButton">
        <Animations>
            <OnClick>
                <sequence>
                    <ScriptAction Script="pageContentBounds = Sys.UI.DomElement.getBounds($get('pageContent'));" />
                    <EnableAction Enabled="false" />
                          <Parallel AnimationTarget="pageContent" Duration=".5">
                            <Resize Height="0" Width="0" Unit="px" />
                            <FadeOut />
                          </Parallel>
                    <EnableAction AnimationTarget="ExpandParallelButton" Enabled="true" />
                    <EnableAction AnimationTarget="ExpandSequenceButton" Enabled="true" />
                </sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>
    
    <cc1:AnimationExtender ID="ExpandExtender" runat="server" TargetControlID="ExpandParallelButton">
        <Animations>
            <OnClick>
                <sequence>
                    <EnableAction AnimationTarget="ExpandParallelButton" Enabled="false" />
                    <EnableAction AnimationTarget="ExpandSequenceButton" Enabled="false" />
                      <Parallel AnimationTarget="pageContent" Duration=".5">
                        <RESize HeightScript="pageContentBounds.height-4"
                                WidthScript="pageContentBounds.width-4" 
                                Unit="px" />
                        <FadeIn />
                      </Parallel>
                    <EnableAction AnimationTarget="CollapseButton" Enabled="true" />
                </sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>
    
    <cc1:AnimationExtender ID="ExpandExtender2" runat="server" TargetControlID="ExpandSequenceButton">
        <Animations>
            <OnClick>
                <sequence AnimationTarget="pageContent" Duration=".5">
                    <EnableAction AnimationTarget="ExpandParallelButton" Enabled="false" />
                    <EnableAction AnimationTarget="ExpandSequenceButton" Enabled="false" />
                    <FadeIn />
                    <Resize HeightScript="pageContentBounds.height-4" Unit="px" />
                    <Resize WidthScript="pageContentBounds.width-4-" Unit="px" />
                    <EnableAction AnimationTarget="CollapseButton" Enabled="true" />
                </sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>    
    
</asp:Content>
